<template>
	<view class="page">
		<view class="content">
			<view class="content-left">
				<image class="img" src="https://images.linglinggong.net/static/orders/left.png" mode="" @click="back ">
				</image>
				<swiper class="content-swiper" autoplay='true' vertical='true' circular='true' duration=1000>
					<swiper-item v-for="(item,index) in list" :key="index">
						<view class="content-swiper-item">
							<view class="">
								{{item}}
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- b0x -->
			<view class="content-box" @click="toJinpai">
				<view class="">
					<text>{{detail.activityReward||0}}</text>
					<text>元</text>
				</view>
				<view class="">金牌零工专属</view>
			</view>
			<view class="content-card">
				<view class="">
					<text>活动任务</text>
					<text> {{`任务周期还剩${detail.monthRemainDay||0}天`}}</text>
				</view>
				<view class="">
					<progressBar title='订单' :min='detail.userActivityGoodModelOrder'
						:max='detail.activityGoodModelOrder'></progressBar>
				</view>
				<view class="">
					<progressBar title='工时' :min='detail.userActivityGoodModelTime' :max='detail.activityGoodModelTime'>
					</progressBar>
				</view>
				<view class="">
					<progressBar title='雇主' :min='detail.userActivityEmployerCount' :max='detail.activityEmployerCount'>
					</progressBar>
				</view>
				<view class="">
					<progressBar title='差评数' :userActivityBadcount="detail.userActivityBadcount"
						:min="detail.activityBadcount-detail.userActivityBadcount>=0?detail.activityBadcount:detail.userActivityBadcount"
						:max='detail.activityBadcount'>
					</progressBar>
				</view>
			</view>
			<view class="content-bg">
			</view>
			<view class="content-rule">
				<view>
				</view>
				<!-- 问答 -->
				<view class="question">
					<view class="" v-for="(t,i) in ruleList" :key="i">
						<view class="">
							<image class="img" :src="t.icon2" mode=""></image>
							<view class="">
								{{t.ask}}
							</view>
						</view>
						<view class="">
							<image class="img" :src="t.icon1" mode=""></image>
							<view class="">
								{{t.answer}}
							</view>
						</view>
						<view class="">
						</view>
					</view>
					<view class="illustrate"> 活动具有区域性，不同城市完单统计至不同城市的活动任务中 </view>
				</view>
			</view>
			<view class="">
			</view>
		</view>
		<orderMask v-if="isShow" @onClose='onClose' />
	</view>
</template>
<script>
	import myswiper from '../../components/beckhayu-swiper/my-swiper.vue'
	import progressBar from './components/progressBar.vue'
	import orderMask from './components/mask.vue'
	export default {
		components: {
			myswiper,
			progressBar,
			orderMask
		},
		name: 'orders',
		data() {
			return {
				isShow: false,
				content: {}, //全部数据
				list: ['张**已到账 300元', '李**已到账 300元', '徐**已到账 300元', '谢**已到账 300元', '石**已到账 300元', '刘**已到账 300元',
					'刘**已到账 300元', '刘**已到账 300元'
				],
				active: 2,
				list1: [],
				ruleList: [{
					icon1: 'https://images.linglinggong.net/static/orders/a.png',
					icon2: 'https://images.linglinggong.net/static/orders/b.png',
					ask: '什么是金牌之星奖励？',
					answer: '为了激励雇员接单的积极性，特设立的此奖项'
				}, {
					icon1: 'https://images.linglinggong.net/static/orders/a.png',
					icon2: 'https://images.linglinggong.net/static/orders/b.png',
					ask: '奖金是多少？',
					answer: '300元'
				}, {
					icon1: 'https://images.linglinggong.net/static/orders/a.png',
					icon2: 'https://images.linglinggong.net/static/orders/b.png',
					ask: '获得金牌之星奖励需要什么身份？',
					answer: '金牌之星奖励为金牌零工专属奖项'
				}, {
					icon1: 'https://images.linglinggong.net/static/orders/a.png',
					icon2: 'https://images.linglinggong.net/static/orders/b.png',
					ask: '获得金牌之星奖励需要做什么？',
					answer: '当月完成金牌任务，任务周期结束时仍为金牌身份'
				}, {
					icon1: 'https://images.linglinggong.net/static/orders/a.png',
					icon2: 'https://images.linglinggong.net/static/orders/b.png',
					ask: '奖金什么时间到账？',
					answer: '完成任务后次月1号结算，奖金在1个工作日内入账到余额'
				}],
				detail: {},
				goldObj: {}
			}
		},
		onShareAppMessage() {
			return {
				title: "在家找日结兼职，工种齐全",
				desc: "免费使用，提前在家找日结兼职",
				path: `/pages/start-n/start-n`,
				imageUrl: 'https://images.linglinggong.net/static/employee-share.jpg',
				success: res => {}
			}
		},
		onLoad(payLoad) {
			this.goldObj = payLoad;
			console.log(payLoad, 'payLoad');
			this.getDetail()
		},
		methods: {
			onClose() {
				this.isShow = false
			},
			async getDetail() {
				let {
					code,
					data
				} = await this.$fetch(this.$api.get_gold_medal, this.goldObj, 'POST')
				if (code == 500) {
					uni.showToast({
						title: '数据错误',
						icon: 'none'
					})
					return
				}
				if (data.userAccountFlag == 1) {
					this.isShow = true
				} else {
					this.isShow = false
				}
				this.detail = data
			},
			toJinpai() {
				uni.navigateTo({
					url: '/pages/grow/grow'
				})
			},
			// 返回上一页
			back() {
				uni.navigateBack();
			},
		}
	}
</script>
<style lang="scss" scoped>
	.page {
		background: url('https://images.linglinggong.net/static/orders/bg.png') center 0/cover no-repeat;
		width: 100%;
		// height: 3105rpx;
		margin-top: -34rpx;
		overflow-x: hidden;
	}

	.content {
		width: 100%;
		border: 1rpx solid transparent;
		display: flex;
		margin-top: 32rpx;
		flex-direction: column;
		align-items: center;

		&-left {
			display: flex;
			padding-top: 40rpx;
			align-items: center;

			&>.img {
				width: 40rpx;
				height: 40rpx;
				min-width: 40rpx;
				margin-left: 26rpx;
			}
		}

		&-amount {
			height: 580rpx;
			text-align: center;
			font-size: 223rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #FFF8AE;
			margin-top: 360rpx;
		}

		&-swiper {
			display: flex;
			height: 63rpx;
			width: 317rpx;
			background: linear-gradient(-270deg, rgba(242, 53, 91, 0.005) 0, #F2355B 100%);
			margin-top: 101rpx;
			margin-left: auto;

			&-item {
				font-size: 32rpx;
				width: 100%;
				height: 100%;
				position: absolute;
				display: flex;
				align-items: center;
				color: #fff;

				&>view {
					margin-left: 28rpx;
				}
			}
		}

		&-box {
			width: 611rpx;
			height: 804rpx;
			background: url(https://images.linglinggong.net/static/orders/box.png) center center /cover no-repeat;
			margin-top: 330rpx;
			display: flex;
			flex-direction: column;

			&>view:first-child {
				text-align: center;
				margin-top: 150rpx;
				width: 100%;

				&>text:nth-child(1) {
					font-size: 221rpx;
					font-weight: 800;
					color: #EA0023;
					margin-left: 14rpx;
					letter-spacing: -0.09em;
				}

				&>text:nth-child(2) {
					font-size: 42rpx;
					font-weight: 400;
					color: #EA0023;
					margin-left: 13rpx;
				}
			}

			&>view:last-child {
				font-size: 30rpx;
				font-weight: 500;
				color: #F83357;
				text-align: center;
			}
		}

		&-card {
			width: 695rpx;
			height: 658rpx;
			background: url(https://images.linglinggong.net/static/orders/card.png) center center /cover no-repeat;
			margin-top: 75rpx;

			&>view {
				width: 585rpx;
				margin: 0 auto;
			}

			&>view:first-child {
				display: flex;
				justify-content: space-between;
				margin-top: -4rpx;

				&>text:first-child {
					font-size: 36rpx;
					font-weight: 500;
					color: #EA0023;
					margin-top: 24rpx;
				}

				&>text:last-child {
					font-size: 24rpx;
					font-weight: 500;
					color: #EA0023;
					margin-top: 23rpx;
				}
			}

			&>view:nth-child(2) {
				margin-top: 28rpx;
			}
		}

		&-bg {
			width: 100%;
			height: 88rpx;
			background: url(https://images.linglinggong.net/static/orders/footerBg.png) center center/cover no-repeat;
			margin-top: -50rpx;
		}

		&-rule {
			width: 695rpx;
			height: 1085rpx;
			background: rgba(255, 255, 255, 0.05);
			border: 1rpx solid rgba(255, 255, 255, 0.64);
			box-shadow: 0rpx 17rpx 43rpx 0rpx rgba(159, 8, 26, 0.41);
			border-radius: 16rpx 16rpx 24rpx 24rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			&>view:nth-child(1) {
				width: 356rpx;
				height: 48rpx;
				background: url('https://images.linglinggong.net/static/orders/title.png') center 0/cover no-repeat;
				margin-top: 40rpx;
				overflow: hidden;
			}

			&>.question {
				overflow: hidden;
				flex: 1;
				display: flex;
				flex-direction: column;
				margin-top: 48rpx;
				margin-left: 43rpx;
				margin-right: 28rpx;

				&>.illustrate {
					margin-top: -20rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: #FFFFFF;
					border-top: 1px dashed #FF8A99;
					padding-top: 40rpx;
				}

				&>view {
					font-size: 28rpx;
					font-weight: 500;
					color: #FFF;

					.img {
						width: 40rpx;
						height: 40rpx;
						margin-right: 16rpx;
						min-width: 40rpx;
					}

					&>view:nth-child(1) {
						display: flex;
						margin-bottom: 12rpx;
						opacity: 0.9;
					}

					&>view:nth-child(2) {
						display: flex;
						margin-bottom: 30rpx;
						font-weight: 800;
					}

					&>view:nth-child(3) {
						width: 609rpx;
						height: 1rpx;
						background: #FFFFFF;
						opacity: 0.5;
						margin-bottom: 33rpx;
					}
				}

				&>view:nth-child(5) {
					&>view:nth-child(3) {
						opacity: 0;
					}
				}
			}
		}

		&>view:last-child {
			background: url(https://images.linglinggong.net/static/orders/footIcon.png) center center/cover no-repeat;
			width: 180rpx;
			height: 58rpx;
			margin-top: 62rpx;
			margin-bottom: 50rpx;
		}
	}

	.content-swiper {
		position: fixed;
		top: 360rpx;
		right: 0;
	}

	.content-left {
		position: fixed;
		top: 80rpx;
		display: flex;
		width: 100%;
	}
</style>